<ion-header>
	<ion-toolbar [color]="copyFile ? 'secondary' : 'primary'">
		<ion-buttons slot="start" *ngIf="folder !=''">
			<ion-back-button></ion-back-button>
		</ion-buttons>
		<ion-title>
			{{ folder || 'Ionic File Explorer' }}
		</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content>
	<ion-text
		color="medium"
		*ngIf="directories.length == 0"
		class="ion-padding ion-text-center"
	>
		<p>No documents found</p>
	</ion-text>

	<ion-list>
		<ion-item-sliding *ngFor="let f of directories">
			<ion-item (click)="itemClicked(f)">
				<ion-icon name="folder" slot="start" *ngIf="f.isDirectory"></ion-icon>
				<ion-icon
					name="document"
					slot="start"
					*ngIf="!f.isDirectory"
				></ion-icon>
				<ion-label text-wrap>
					{{ f.name }}
					<p>{{ f.fullPath }}</p>
				</ion-label>
			</ion-item>

			<ion-item-options side="start" *ngIf="!f.isDirectory">
				<ion-item-option (click)="deleteFile(f)" color="danger">
					<ion-icon name="trash" slot="icon-only"></ion-icon>
				</ion-item-option>
			</ion-item-options>

			<ion-item-options side="end">
				<ion-item-option (click)="startCopy(f)" color="success">
					Copy
				</ion-item-option>
				<ion-item-option (click)="startCopy(f, true)" color="primary">
					Move
				</ion-item-option>
			</ion-item-options>
		</ion-item-sliding>
	</ion-list>

	<ion-fab vertical="bottom" horizontal="end" slot="fixed">
		<ion-fab-button>
			<ion-icon name="add"></ion-icon>
		</ion-fab-button>

		<ion-fab-list side="top">
			<ion-fab-button (click)="createFolder()">
				<ion-icon name="folder"></ion-icon>
			</ion-fab-button>

			<ion-fab-button (click)="createFile()">
				<ion-icon name="document"></ion-icon>
			</ion-fab-button>
		</ion-fab-list>
	</ion-fab>
</ion-content>
